<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-23 09:12:21
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-11-25 18:42:32
-->
<template>
  <div>
    <el-form
      :model="ordinaryForm"
      ref="ordinaryForm"
      :rules="ordinaryRules"
      label-position="top"
      v-if="IssueShow"
    >
      <el-form-item label="发票抬头类型" prop="titleType">
        <el-select
          v-model="ordinaryForm.titleType"
          placeholder="请选择发票抬头"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票抬头" prop="title">
        <el-input
          v-model="ordinaryForm.title"
          placeholder="请填写发票抬头"
        ></el-input>
      </el-form-item>
      <el-form-item label="发票税号" prop="taxNumber">
        <el-input
          v-model="ordinaryForm.taxNumber"
          placeholder="请填写发票税号"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="发票内容" prop="content">
        <el-select v-model="ordinaryForm.content" placeholder="请选择发票内容">
          <el-option
            v-for="item in contentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="ordinaryForm.remark"
          placeholder="请输入备注信息"
        ></el-input>
      </el-form-item>
      <el-form-item label="推送邮箱">
        <el-input
          v-model="ordinaryForm.email"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    ordinaryForm: {
      type: Object,
      required: true,
    },
    IssueShow: {
      type: Boolean,
      required: true,
    },
  },
  watch: {
    "ordinaryForm.titleType": {
      deep: true,
      handler(val) {
        if (val == 1) {
          this.disabled = true;
          this.ordinaryRules.taxNumber[0].required = false;
        } else {
          this.disabled = false;
          this.ordinaryRules.taxNumber[0].required = true;
        }
      },
    },
  },
  data() {
    return {
      disabled: false,
      typeOptions: [
        {
          value: 1,
          label: "个人",
        },
        {
          value: 2,
          label: "公司",
        },
      ],
      contentOptions: [
        {
          value: 1,
          label: "咨询费",
        },
        {
          value: 2,
          label: "报名费",
        },
      ],
      ordinaryRules: {
        titleType: [
          {
            required: true,
            message: "请选择发票抬头类型",
            trigger: "change",
          },
        ],
        title: [
          {
            required: true,
            message: "请填写发票抬头",
            trigger: "blur",
          },
        ],
        taxNumber: [
          {
            required: true,
            message: "请填写发票税号",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请选择发票内容",
            trigger: "change",
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
    /deep/ .el-input__inner {
      width: 330px;
    }
  }
}
</style>